{% extends 'base.html' %}
 
{% block content %}
<style type="text/css">
.info-box{
  margin-bottom: 15px !important;
  min-height: 60px !important;
} 
.info-box-content{
  margin-left: 57px !important;
}
#job_status_div .info-box-icon{
  height: 61px !important;
  width: 58px  !important;
  line-height: 61px !important;
  font-size: 22px !important;
}
.info-box-number{
  font-size: 12px !important;
}
.col-xs-2{
  padding-right: 0px !important;
}
.job-items-faild{
  height: 10px;
  color: red;
}
.job-items-unexecuted{
  height: 10px;
  color: white;
}
.item-detail{
  position: absolute;
  top: 0px;
  left: 80px;
  z-index: 1000;
  background: #0d0d0d;
  opacity: 0.8;
  padding: 6px;
  border-radius: 3px;
  /* color: white; */
  display: none;
} 
#lock_status_div .info-box-content{
  height: 95px !important;
}
#lock_status_div .info-box-icon{
  height: 95px !important;
  line-height: 92px !important;
  width: 58px  !important;
  font-size: 22px !important;
}
</style>
<br/>
<div class="row">
    <div class="col-xs-12"> 
        <h4>同步任务状态(统计6小时内)</h4>
         <div class="row" id="job_status_div">
            <div class="col-md-2 col-sm-2 col-xs-2">
              <div class="info-box">
                <span class="info-box-icon bg-aqua"> </span>

                <div class="info-box-content">
     
                  <span class="info-box-number">
                    <span style='color:green'>加载中...</span> 
                  </span>  
                </div> 
              </div> 
            </div> 
          </div>
   
        </div>
  </div>
  <br/>
 <div class="row">
    <div class="col-xs-12"> 
        <h4>数据库健康(每小时刷新)</h4>
         <div class="row" id="lock_status_div">
            <div class="col-md-2 col-sm-6 col-xs-12">
              <div class="info-box">
                <span class="info-box-icon bg-aqua"><i class="ion ion-ios-gear-outline"></i></span>

                <div class="info-box-content">
                      <span class="info-box-number">
                    <span style='color:green'>加载中...</span> 
                  </span>  
                </div>
                <!-- /.info-box-content -->
              </div>
              <!-- /.info-box -->
            </div>
            <!-- /.col -->
            
            <!-- /.col -->
          </div>
   
        </div>
  </div>
<!--    <br/>
   <div class="row">
    <div class="col-xs-12"> 
        <h4>分片异常(每小时刷新)</h4>
         <div class="row" id="shard_status_div">
            <div class="col-md-2 col-sm-6 col-xs-12">
              <div class="info-box">
                <span class="info-box-icon bg-aqua"><i class="ion ion-ios-gear-outline"></i></span>

                <div class="info-box-content">
                     <span class="info-box-number">
                    <span style='color:green'>加载中...</span> 
                  </span>  
                </div>
              </div>
            </div>
          </div>
        </div>
  </div> -->
   


{% endblock %}

{% block script %}
<script type="text/javascript">
  var intel = -1;
  $(document).ready(function(){

    var dbs = ['lan', '3ce', 'lrl','skc','shu','kie','mg','ks','lp','hr','mny','lrp','ud','ysl','sgmb','mm','gac','bio','ys','ac']
    // var dbs = ['default', 'postgres','default', 'postgres','default', 'postgres','default', 'postgres','default', 'postgres','default', 'postgres','default', 'postgres']
    function get_job_status(){

      $('#job_status_div').html('')

      for (var i = dbs.length - 1; i >= 0; i--) {
        $.ajax({
          url: "api/query/",
          type: "post",
          dataType: "html",
          data:{
            dbname: dbs[i],
            type: "job"
          },
          success: function(data){
            $('#job_status_div').append(data)
          }
        })
      }

    }

    function get_shard_status(){
      $('#shard_status_div').html('')

      for (var i = dbs.length - 1; i >= 0; i--) {
        $.ajax({
          url: "api/query/",
          type: "post",
          dataType: "html",
          data:{
            dbname: dbs[i],
            type: "shard"
          },
          success: function(data){
            $('body').append(data)
          }
        })
      }
    
    }

    function get_lock_status(){
      $('#lock_status_div').html('')

      for (var i = dbs.length - 1; i >= 0; i--) {
        $.ajax({
          url: "api/query/",
          type: "post",
          dataType: "html",
          data:{
            dbname: dbs[i],
            type: "lock"
          },
          success: function(data){
            $('#lock_status_div').append(data)
          }
        })
      }
    
    }


    function load(){
      intel = -1
      console.info('asdfaf')
       get_job_status()

       setTimeout(function(){
          get_lock_status() 
       }, 3*1000)

      setTimeout(function(){
          get_shard_status()
       }, 5*1000)
       
    }
    
    load()
    setInterval(load,  60*60*1000)

})
</script>

{% endblock %}
